<template>
  <div>
    <div class="card mt-3 rounded-0" v-if="loading">
      <div class="card-body row">
        <div class="col-sm-2 col-md-1">
          <div style="width: 76px; height: 76px" class="bg-skeleton"></div>
        </div>
        <div class="col-ms-7 col-md-8">
          <div style="width: 50%; height: 30px; margin-bottom: 0.5rem" class="bg-skeleton"></div>
          <div style="width: 80px; height: 22px; margin-bottom: 2.2rem" class="bg-skeleton"></div>
          <div style="width: 80%; height: 22px; margin-bottom: 1rem" class="bg-skeleton"></div>
          <div style="width: 80%; height: 22px; margin-bottom: 1rem" class="bg-skeleton"></div>
          <div style="width: 80%; height: 22px; margin-bottom: 1rem" class="bg-skeleton"></div>
          <div style="width: 80%; height: 22px; margin-bottom: 1rem" class="bg-skeleton"></div>
        </div>
        <div class="col-ms-3 col-md-3">
          <div class="d-flex align-items-center justify-content-center" style="min-height: 200px">
            <i class="fa fa-fw fa-spinner fa-3x fa-pulse text-skeleton"></i>
          </div>
        </div>
      </div>
      <div class="bg-skeleton py-2 d-flex align-items-center">
        <span>&nbsp;</span>
      </div>
    </div>

    <div class="card mt-3 rounded-0" v-else>
      <div class="card-body row">
        <div class="col-sm-2 col-md-1">
          <img :src="companyLogo" alt="" class="w-100" />
        </div>

        <div class="col-ms-7 col-md-8">
          <div class="d-flex">
            <h3 class="company-name">{{ baseInfo.QYMC }}</h3>
            <div class="company-status">
              <i class="fa fa-home mr-1 fs-5"></i>
              <span>{{ baseInfo.JYZT }}</span>
            </div>
          </div>
          <ul class="list-inline mb-3">
            <li>
              <el-tag type="success" class="border-0 rounded-0">{{ baseInfo.XYLXDL }}</el-tag>
            </li>
          </ul>

          <div class="company-info">
            <div class="row">
              <div class="col-sm-6">
                <dl class="company-dl">
                  <dt class="company-dt">统一社会信用码：</dt>
                  <dd class="company-dd">{{ baseInfo.TYSHXYDM }}</dd>
                </dl>
              </div>
              <div class="col-sm-6">
                <dl class="company-dl">
                  <dt class="company-dt">所属行业：</dt>
                  <dd class="company-dd">{{ baseInfo.XYLXDL }}</dd>
                </dl>
              </div>
              <div class="col-sm-6">
                <dl class="company-dl">
                  <dt class="company-dt">成立日期：</dt>
                  <dd class="company-dd">{{ baseInfo.CLSJ }}</dd>
                </dl>
              </div>
              <div class="col-sm-6">
                <dl class="company-dl">
                  <dt class="company-dt">登记机关：</dt>
                  <dd class="company-dd">{{ baseInfo.DJJG }}</dd>
                </dl>
              </div>
              <div class="col-sm-6">
                <dl class="company-dl">
                  <dt class="company-dt">注册资本：</dt>
                  <dd class="company-dd">{{ baseInfo.ZCZB }}</dd>
                </dl>
              </div>
              <div class="col-sm-6">
                <dl class="company-dl">
                  <dt class="company-dt">住所：</dt>
                  <dd class="company-dd">{{ baseInfo.JYDZ }}</dd>
                </dl>
              </div>
              <div class="col-sm-12">
                <dl class="company-dl">
                  <dt class="company-dt">简介：</dt>
                  <dd class="company-dd">{{ baseInfo.JJ }}</dd>
                </dl>
              </div>
            </div>
          </div>
        </div>

        <div class="col-ms-3 col-md-3">
          <info-base-radar></info-base-radar>
        </div>
      </div>

      <div class="bg-light px-3 py-2 d-flex align-items-center">
        <i class="fa fa-bookmark-o text-accent mr-2"></i>
        <span>浏览数：- 次</span>
      </div>
    </div>

    <el-tabs v-model="tabActive" type="border-card" class="shadow-none mt-3">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="`${tab.label}`" :name="tab.name">
        <component :is="tab.component" :base-info="baseInfo"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import InfoBaseRadar from '@/credit/views/county/finance/components/ChartRadar.vue'
import InfoBase from '@/credit/views/county/finance/components/TabBase.vue'
import InfoAsset from '@/credit/views/county/finance/components/TabAsset.vue'
import InfoOperate from '@/credit/views/county/finance/components/TabOperate.vue'
import InfoRisk from '@/credit/views/county/finance/components/TabRisk.vue'

export default {
  components: {
    InfoBaseRadar,
  },
  props: {
    usci: String,
  },
  data() {
    return {
      enumCompanyStatus: {},
      loading: false,
      baseInfo: {},
      tabActive: 'base',
      tabs: [
        {
          name: 'base',
          label: '基本信息',
          needLogin: false,
          num: 0,
          component: InfoBase,
        },
        {
          name: 'asset',
          label: '资产信息',
          needLogin: true,
          num: 0,
          component: InfoAsset,
        },
        {
          name: 'operate',
          label: '经营信息',
          needLogin: true,
          num: 0,
          component: InfoOperate,
        },
        {
          name: 'risk',
          label: '负面信息',
          needLogin: true,
          num: 0,
          component: InfoRisk,
        },
      ],
    }
  },
  computed: {
    companyLogo() {
      return require('@/credit/assets/img/pf.png')
    },
  },
  watch: {
    usci: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getData() {
      if (!this.usci) return

      this.loading = true
      this.$http
        .get('/api/xyd/view/getDetailBase', {
          params: {
            registerNo: this.usci,
          },
        })
        .then(res => {
          const data = res.data.baseInfo || {}

          data.CLSJ = this.formatDay(data.CLSJ)
          data.YYQXKS = this.formatDay(data.YYQXKS)
          data.YYQXJS = this.formatDay(data.YYQXJS)

          this.getCompnayStatus().then(() => {
            this.baseInfo.JYZT = this.enumCompanyStatus[data.JYZT || ''] || data.JYZT
          })

          this.baseInfo = data
        })
        .catch(err => {
          this.$message.error(
            (err && err.data && err.data.error_description) || '获取数据失败，请重试'
          )
          throw err
        })
        .finally(() => {
          this.loading = false
        })
    },
    async getCompnayStatus() {
      const res = await this.$api.getData({
        service: 'xyd',
        table: 'system_enum',
        params: {
          'enum_field.eq': 'GS_ZCDJXX.regstate',
          fields: ['enum_value', 'enum_key'],
        },
        order: {
          order_num: 'asc',
        },
      })
      const data = res.data || []
      this.enumCompanyStatus = data.reduce((p, c) => {
        p[c.enum_value || ''] = c.enum_key
        return p
      }, {})
    },
    formatDay(value) {
      if (!value) return ''
      return `${value}`.substring(0, 10)
    },
  },
}
</script>

<style lang="scss" scoped>
.company-name {
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: 1.5rem;
}

.company-info {
  background-color: #f5fbff;
  padding: 1rem;
  border-radius: 2px;
}

.company-status {
  border-top-left-radius: 12px;
  border-bottom-right-radius: 12px;
  font-weight: bold;
  height: 26px;
  line-height: 25px;
  margin-left: 1rem;
  padding: 0 1rem;
  color: #fff;
  background-color: #f9a32a;
}

.company-dl {
  display: flex;
  margin-bottom: 0.5rem;
}

.company-dt {
  width: 120px;
  text-align: right;
}
.company-dd {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/deep/ .company-section-title {
  font-weight: bold;
  padding-left: 1rem;
  position: relative;
  margin-bottom: 1rem;
  font-size: 1.25rem;

  &::before {
    content: '';
    width: 5px;
    height: 16px;
    background: var(--primary);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 2px;
  }
}

.bg-skeleton {
  background-color: rgba(128, 128, 128, 0.07);
}
.text-skeleton {
  color: rgba(128, 128, 128, 0.1);
}
</style>
